<%--
  Created by IntelliJ IDEA.
  User: bestick
  Date: 2015/12/17
  Time: 19:08
  天地有万古，此身不再得；人生只百年，此日最易过。幸生其间者，不可不知有生之乐；亦不可不怀虚生之忧。
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%-- IF IE --%>
    <jsp:include page="${pageContext.request.contextPath}/jsp/home/common/if_ie.jsp"></jsp:include>

    <!-- charset -->
    <meta charset="utf-8">

    <!-- title -->
    <title>信托详情</title>

    <!-- Mobile Meta -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1,minimum-scale=1, user-scalable=no">

    <!-- Favicon -->
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/resources/app/images/img/logo/favicon.ico">

    <!-- Bootstrap core CSS -->
    <link href="${pageContext.request.contextPath}/resources/libs/css/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- BootStrap-Slider core CSS -->
    <link href="${pageContext.request.contextPath}/resources/libs/css/bootstrap-slider/bootstrap-slider.css"
          rel="stylesheet">

    <!-- Swiper core CSS -->
    <link href="${pageContext.request.contextPath}/resources/libs/css/swiper/swiper.css" rel="stylesheet">

    <!-- JuCaiBang core CSS file -->
    <link href="${pageContext.request.contextPath}/resources/app/css/home/jcb.css" rel="stylesheet">

    <style>
        .swiper-wrapper {
            height: auto;
        }
        .swiper-slide {
            height: auto;
        }
        .swiper-slide {
            text-align: center;
        }
        .swiper-slide img {
            width: 100%;
        }
    </style>
</head>
<body>
<%-- navbar --%>
<jsp:include page="${pageContext.request.contextPath}/jsp/home/common/nav_nonsearch.jsp"></jsp:include>

<!-- main -->
<div class="trustDetail" data-pid="${param.pId}">

    <div class="trustDetail-bg-1">
        <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">

            <!-- trustDetail-info -->
            <div class="trustDetail-info" id="trustDetail-info"></div>

            <!-- trustDetail-desc -->
            <div class="trustDetail-desc" id="trustDetail-desc"></div>

            <!-- trustDetail-exhibition -->
            <div class="trustDetail-exhibition" id="trustDetail-exhibition"></div>
        </div>
    </div>
    <div class="trustDetail-bg-cal">
        <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
            <div class="jcb-financial-calculator" id="jcb-financial-calculator"></div>
            <div id="jcb-cal-chart" style="margin-top: 28px;height:400px"></div>
        </div>
    </div>
    <div class="trustDetail-bg-2">
        <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
            <!-- trustDetail-ppt -->
            <div class="trustDetail-ppt">
                <div class="trustDetail-ppt-header">产品介绍</div>
                <!-- Swiper -->
                <div class="swiper-container">
                    <div class="swiper-wrapper" id="trustDetail-ppt"></div>
                    <div class="swiper-button-next swiper-button-black"></div>
                    <div class="swiper-button-prev swiper-button-black"></div>
                </div>
                <div class="trustDetail-ppt-footer" id="trustDetail-ppt-footer"></div>
            </div>
        </div>
    </div>
    <div class="trustDetail-bg-3">
        <!-- trustDetail-similar -->
        <div class="trustDetail-similar" id="trustDetail-similar">
            <div class="trustDetail-similar-header col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
                相近产品
            </div>
            <div class="trustDetail-similar-content col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
                <iframe src="${pageContext.request.contextPath}/common/product_map/page?state=2&w=60&h=32" width="100%" height="50%" scrolling="no"></iframe>
            </div>
        </div>
    </div>
    <div class="trustDetail-bg-4">
        <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
            <div style="padding: 10px 0;">
                <p class="trustDetail-info-title">
                    <span class="trustDetail-info-status on-sale">在售</span>
                    锦钰财富
                    <input type="button" class="btn btn-jcb-transparent jcb-trustDetail-showDetail" value="查看详情">
                </p>
                <p class="trustDetail-info-subTitle">
                    锦玉财富201202号集资信托计划
                </p>
            </div>
            <div style="padding: 10px 0;">
                <p class="trustDetail-info-title">
                    <span class="trustDetail-info-status on-sale">在售</span>
                    锦钰财富
                    <input type="button" class="btn btn-jcb-transparent jcb-trustDetail-showDetail" value="查看详情">
                </p>
                <p class="trustDetail-info-subTitle">
                    锦玉财富201202号集资信托计划
                </p>
            </div>
            <div style="padding: 10px 0;">
                <p class="trustDetail-info-title">
                    <span class="trustDetail-info-status on-sale">在售</span>
                    锦钰财富
                    <input type="button" class="btn btn-jcb-transparent jcb-trustDetail-showDetail" value="查看详情">
                </p>
                <p class="trustDetail-info-subTitle">
                    锦玉财富201202号集资信托计划
                </p>
            </div>
        </div>
    </div>
    <div class="trustDetail-bg-5">
        <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
            <div class="trustDetail-evaluate">
                <div class="trustDetail-evaluate-header">评价详情</div>
                <div class="trustDetail-evaluate-content" id="detail-evaluate-content"></div>
                <jsp:include page="${pageContext.request.contextPath}/jsp/home/common/evaluate.jsp"></jsp:include>
            </div>
        </div>
    </div>
</div>

<jsp:include page="${pageContext.request.contextPath}/jsp/home/common/footer.jsp"></jsp:include>

<!-- JavaScript files placed at the end of the document so the pages load faster
		==================================================================================== -->
<!-- Jquery and Bootstap core js files -->
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/libs/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/libs/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/libs/js/jsrender.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/libs/js/range.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/libs/js/Highcharts.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/app/js/home/bootstrap-slider.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/libs/js/swiper.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/app/js/config.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/app/js/home/common.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/app/js/home/trustDetail.js"></script>

<!-- 信托详情info模版 -->
<script id="trustDetail-info-temp" type="text/x-jsrender">
    {{!-- trustDetail-info-left --}}
    <div class="trustDetail-info-left">
        <p class="trustDetail-info-title">
            {{if data.product_status == 0}}
            <span class="trustDetail-info-status pre-sale">预约</span>
            {{else data.product_status == 1}}
            <span class="trustDetail-info-status on-sale">在售</span>
            {{else data.product_status == 2}}
            <span class="trustDetail-info-status sold-out">售罄</span>
            {{/if}}
            {{:data.product_shortname}}
        </p>
        <p class="trustDetail-info-subTitle">{{: data.pName}}</p>
        <div class="trustDetail-info-interest">
            <div class="trustDetail-info-benefitRate inline-block">
                <span style="font-size: 38px;">{{:data.minrart.toFixed(2)}}-</span>{{:data.maxrart.toFixed(2)}}<span>%</span>
                <p>预期收益率</p>
            </div>
            <div class="trustDetail-info-term inline-block">
                {{: data.interest_span}}<span>月</span>
                <p>产品期限</p>
            </div>
            <div class="trustDetail-info-minAmount inline-block">
                {{: ~wan(data.min_limit).toFixed(0) /}}<span>万</span>
                <p>起购金额</p>
            </div>
        </div>
        <div class="trustDetail-info-slider clearfix">
            <input type="text" class="slider" value="" data-slider-min="0" data-slider-max="{{:data.product_scale}}" data-slider-step="1" data-slider-value="{{:data.now_scale}}" data-slider-id="BC" id="B" data-slider-tooltip="hide" data-slider-handle="triangle" data-slider-enabled="false"/>
            <span class="trustDetail-info-amount-desc pull-right">规模<span class="trustDetail-info-amount">{{: (data.product_scale/100000000).toFixed(2)}}</span>亿</span>
        </div>
    </div>
    {{!-- trustDetail-info-right --}}
    <div class="trustDetail-info-right">
        <div class="trustDetail-info-risk">
            <img src="${pageContext.request.contextPath}/resources/app/images/img/productList/risk-level-circle.png" class="trustDetail-info-risk-level">
            <img style="transform: rotate({{:data.product_level/5*180-90}}deg);" src="${pageContext.request.contextPath}/resources/app/images/img/productList/risk-pointer.png" class="trustDetail-info-risk-pointer">
            <p class="trustDetail-info-risk-text">风&nbsp;&nbsp;险</p>
        </div>
        <div class="trustDetail-info-btn">
            <%--<input type="button" class="btn btn-jcb-red" value="加入购物车">--%>
            <%--<input type="button" class="btn btn-jcb-red" value="预约">--%>
            <input id="concerned" type="button" class="btn btn-jcb-red" value="收藏">
        </div>
    </div>
</script>

<!-- 产品概要模版 -->
<script id="trustDetail-desc-temp" type="text/x-jsrender">
    {{!-- 产品概要头 --}}
    <div class="trustDetail-desc-header">
        产品概要
    </div>
    {{!-- 产品概要正文 --}}
    <div class="trustDetail-desc-content">
        {{:data.productDescription}}
    </div>
</script>

<!-- 产品展示 -->
<script id="trustDetail-exhibition-temp" type="text/x-jsrender">
    {{!-- 产品展示头 --}}
    <div class="trustDetail-exhibition-header">
        产品展示
    </div>
    {{!-- 产品展示体 --}}
    <div class="trustDetail-exhibition-content">
        <table class="trustDetail-table">
            <tr>
                <td class="trustDetail-table-head">发行机构</td>
                <td class="content">{{:data.oran_name}}</td>
                <td class="trustDetail-table-head">投向</td>
                <td class="content">{{:data.product_purpose}}</td>
                <td class="trustDetail-table-head">投资起点</td>
                <td class="content">{{: ~wan(data.min_limit).toFixed(0) }}万</td>
            </tr>
            <tr>
                <td class="trustDetail-table-head">产品类型</td>
                <td class="content">
                    {{sysConstants data.product_type "productType"}}{{/sysConstants}}
                </td>
                <td class="trustDetail-table-head">信托类型</td>
                <td class="content">
                    {{sysConstants data.Trust_SortType "trustSortType"}}{{/sysConstants}}
                </td>
                <td class="trustDetail-table-head">项目位置</td>
                <td class="content">{{:data.areaName}}</td>
            </tr>
            <tr>
                <td class="trustDetail-table-head">收益分配</td>
                <td class="content">{{:data.dist_period}}</td>
            </tr>
        </table>
        <table class="trustDetail-table">
            <tr>
                <td class="trustDetail-table-head">投资金额（万元）</td>
                {{for rate}}
                    <td class="content">{{: ~wan(interest_min).toFixed(0) }}-{{: ~wan(interest_max).toFixed(0) }}（不含）</td>
                {{/for}}
            </tr>
            <tr>
                <td class="trustDetail-table-head">收益率</td>
                {{for rate}}
                    <td class="content">{{: product_rate.toFixed(2)}}%</td>
                {{/for}}
            </tr>
        </table>
    </div>
</script>

<!-- 理财计算器模版 -->
<script id="jcb-financial-calculator-temp" type="text/x-jsrender">
    {{!-- jcb-cal --}}
    <div class="jcb-financial-calculator-header">理财计算器</div>
    <div class="jcb-financial-calculator-content">
        <p class="jcb-financial-calculator-title">预期收益率%</p>
        {{range rate start=0 end=3}}
            <span class="jcb-financial-calculator-dot">●</span><span class="jcb-financial-calculator-line" style="width: {{: 21/#get('array').data.length}}%"></span>
            <span class="pInterest-span">{{: product_rate.toFixed(2)}}%</span><span class="jcb-financial-calculator-line" style="width: {{: 21/#get('array').data.length}}%"></span>
        {{/range}}
        <%--<span class="jcb-financial-calculator-dot">●</span><span class="jcb-financial-calculator-line"></span>--%>
        <%--<span class="pInterest-span">{{: rate[0].product_rate}}%</span>--%>
        <%--<span class="jcb-financial-calculator-line"></span><span class="jcb-financial-calculator-dot">●</span><span class="jcb-financial-calculator-line"></span>--%>
        <%--<span class="pInterest-span">{{: rate[1].product_rate}}%</span>--%>
        <%--<span class="jcb-financial-calculator-line"></span><span class="jcb-financial-calculator-dot">●</span><span class="jcb-financial-calculator-line"></span>--%>
        <%--<span class="pInterest-span">{{: rate[2].product_rate}}%</span>--%>
        <%--<span class="jcb-financial-calculator-line"></span>--%>
        <span class="jcb-financial-calculator-dot">●</span>
        <div class="jcb-cal-slider">
            <input type="text" id="jcb-calculator-slider" class="jcb-calculator-slider" data-slider-min="100" data-slider-max="1000" data-slider-step="1" data-slider-value="200"/>
        </div>
        <div class="jcb-cal-bar"></div>
        <div class="jcb-cal-amount">投资额（万元）</div>
        <div class="jcb-cal-count-box">
            <div class="jcb-cal-count-content amount">
                <p class="count-title">投资额</p>
                <input id="jcb-cal-amount" type="number" value="200" class="count-num">万元
            </div>
            <div class="times">&times;</div>
            <div class="jcb-cal-count-content yield">
                <p class="count-title">预期收益率%</p>
                <span id="jcb-cal-yield" class="count-num">
                    {{if rate[0].product_rate}}
                        {{: rate[0].product_rate.toFixed(2)}}
                    {{else}}
                        0
                    {{/if}}
                </span>
            </div>
            <div class="times">&times;</div>
            <div class="jcb-cal-count-content term">
                <p class="count-title">期限</p>
                <input id="jcb-cal-term" type="number" value="1" class="count-num">年
            </div>
            <div class="equals">=</div>
            <div class="jcb-cal-count-content sum">
                <p class="count-title">预期总收益</p>
                <span id="jcb-cal-sum" class="count-num">{{: rate[0].product_rate/100 * 200 * 1}}.00</span>万元
            </div>
        </div>
    </div>
</script>

<!-- ppt模版 -->
<script id="trustDetail-ppt-temp" type="text/x-jsrender">
    {{!-- Swiper --}}
    <div class="swiper-slide">
        <img src="{{: #data}}">
    </div>
</script>

<!-- ppt下方声明 -->
<script id="trustDetail-ppt-footer-temp" type="text/x-jsrender">
    {{!-- Swiper --}}
    声明：{{:data.summary}}
</script>
</body>
</html>
